<script setup>
import _ from 'lodash';
import { $menuUtils } from '@jzl/utils';
import { DFT_ICONS } from '@jzl/icons';

const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  }
});

const getNodeName = (data) => {
  let name = _.get(data, 'name');
  let type = _.get(data, 'content_type');

  if (type === 'PER_FORM') {
    name = _.get(data, 'form.form_name');
    let vname = _.get(data, 'view.view_name');

    if (vname) name += `[${vname}]`;
  } else if (type === 'PER_REPORT') {
    name = _.get(data, 'report.title');
  } else if (type === 'PER_API') {
    name = _.get(data, 'api.api_name');
  }

  return name;
};

const getNodeIconFont = (data) => {
  let type = _.get(data, 'content_type');

  if (type === 'PER_FORM') {
    return DFT_ICONS.formview;
  } else if (type === 'PER_REPORT') {
    return DFT_ICONS.chartBar;
  } else if (type === 'PER_API') {
    return DFT_ICONS.api;
  } else {
    return $menuUtils.getIconFont(data);
  }
};
</script>

<template>
  <span
    class="menu-custom-tree-node menu-icon-node"
  >
    <span
      class="menu-custom-icon menu-icon"
      :class="{
        'is-app': $menuUtils.isApp(data),
        'is-empty': $menuUtils.isGroup(data)
      }"
      :style="$menuUtils.getIconStyleVar(data)"
    >
      <JIcon v-if="data?.loading" :icon="DFT_ICONS.loadingSpinner" class="el-icon-loading" />
      <JIcon v-else-if="$menuUtils.isGroup(data)" :icon="$menuUtils.getIconDefault(data)" />
      <img v-else-if="$menuUtils.getIconImg(data)" :src="$menuUtils.getIconImg(data)" />
      <template v-else-if="getNodeIconFont(data)">
<!--        <JIcon class="menu-icon-white" :icon="getNodeIconFont(data)" />-->
        <JIcon :icon="getNodeIconFont(data)" />
      </template>
      <JIcon v-else :src="$menuUtils.getIconDefault(data)" />
    </span>
    <span>{{ getNodeName(data) }}</span>
    <JIcon
      v-if="$menuUtils.isApp(data)"
      :icon="DFT_ICONS.app"
      class="app-icon"
      v-tippy
      content="应用"
    />
    <JIcon
      v-if="$menuUtils.isWhite(data)"
      :icon="DFT_ICONS.white"
      class="app-icon"
      v-tippy
      content="白名单菜单"
    />
  </span>
</template>
